<template>
    <div class="authentication">
        <group title="请输入16位卡号">
            <x-input title="卡号" :max='16'  placeholder="请输入卡号"  required v-model="value"></x-input>
        </group>
        <group title="请输入身份证后6位">
            <x-input title="身份证" :max='6' :min='6' placeholder="请输入身份证后6位" required v-model="card"></x-input>
        </group>
        <group>
            <x-input title="手机号" :max="11" :min='11' is-type="china-mobile" placeholder="请输入手机号" type="tel" required v-model="phone"></x-input>
        </group>
        <group>
            <x-input title="验证码" type="number" required placeholder="请输入验证码" required v-model="authcode" :max="6" :min='6'>
                <x-button slot="right" type="primary" @click.native="sendCode()" mini :disabled="isdisabled">{{msg|filterMsg}}</x-button>
            </x-input>
        </group>
    
        <div class="btn" @click="bindUser()">
            <span>确定</span>
        </div>
    </div>
</template>

<script>
import api from "../fetch/api";
import { XInput, Group, XButton } from "vux";
import { getStore, setStore, removeStore } from "../config/mUtils";
export default {
  components: {
    XInput,
    Group,
    XButton
  },
  data() {
    return {
      value: "", //银行卡号
      card: "", //身份证号码后6位
      phone: "", //手机号码
      isdisabled:false,
      msg:'发送验证码',
      authcode: "" //手机验证码
    };
  },
  filters:{
      filterMsg(value){
          return typeof(value) === 'number'?value+'秒':value
      }
  },
  methods: {
    sendCode() {
      if (this.validateInfo()) {
        let data = {
          accno: this.value,
          cardno: this.card,
          mobile: this.phone,
          token: getStore("token")
        };
        api.get_mobile_code(data).then(res => {
          if(res.success){
              this.$vux.toast.text('发送成功')
              this.isdisabled = true
              this.msg = 60
              let time = setInterval(()=>{
                  this.msg--
                  if(this.msg === 0){
                      clearInterval(time)
                      this.msg = '发送验证码'
                      this.isdisabled = false
                  }
              },1000)
          }
        });
      }
    },
    validateInfo() {
      if (!(this.value.length === 12 || this.value.length === 16)) {
        this.$vux.toast.text("请输入正确的银行卡号！");
        return false;
      } else if (this.card.length !== 6) {
        this.$vux.toast.text("请输入正确的身份证号码后6位！");
        return false;
      } else if (this.phone.length !== 11) {
        this.$vux.toast.text("请输入正确的手机号码！");
        return false;
      }else{
          return true;
      }
    },
    bindUser() {
      if (this.validateInfo()) {
        if (this.authcode.length !== 6) {
          this.$vux.toast.text("请输入正确的验证码");
        } else {
          let data = {
            accno: this.value,
            cardno: this.card,
            verifyCode: this.authcode,
            token: getStore("token")
          };
          api.get_userinfo_bind(data).then(res => {
            if (res.success) {
              this.$router.push("/home");
            }
          });
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.authentication {
  .weui-btn_mini {
    margin-top: 0;
    padding: 0.2rem 0.7rem;
    line-height: 1.8;
    border-radius: 1rem;
    font-size: 0.6rem !important;
  }
}
</style>

